<!-- 平安永登全景看板右边全部内容 -->
<template>
  <div>
    <!-- 第一个box -->
    <div class="box-first">
      <div class="xlgc">雪亮工程</div>
      <div class="dianwei">
        点位：<span>{{ dianWei }}</span> 个
      </div>
      <el-carousel
        :interval="4000"
        :initial-index="1"
        type="card"
        height="180px"
        width="400px"
      >
        <el-carousel-item v-for="(item, index) in Engineering" :key="index">
          <h3 class="medium"><img :src="item.img" alt="" /></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 第二个box -->
    <div class="box-second">
      <div class="xlgc">网格化管理</div>
      <div class="box1">
        <div class="box1-1"></div>
        <div class="box1-2">{{wghgl.name1}}：</div>
        <div class="box1-3">{{wghgl.value1}}<span>个</span></div>
      </div>
      <div class="box2">
        <div class="box1-1"></div>
        <div class="box1-2">{{wghgl.name2}}：</div>
        <div class="box1-3">{{wghgl.value2}}<span>个</span></div>
      </div>
    </div>
    <!-- 第三个box -->
    <div class="box-three">
      <div class="xlgc">命案风险预警</div>
      <div class="fourbox">
        <div class="fourbox-box" v-for="(item, index) in fourBall" :key="index">
          <!-- <img :src="item.img" alt=""> -->
          <div
            :style="{ background: 'url(' + item.img + ')' }"
            class="imgBox"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      // 雪亮工程
      Engineering: [
        { img: require('./image/lunbo1.png') },
        { img: require('./image/lunbo2.png') },
        { img: require('./image/lunbo3.png') }
      ],
      //   点位
      dianWei: 1054,
      // 网格化管理
      wghgl: { name1: '网格划分', name2: '网格员', value1: 1465, value2: 2117 },
      // 命案风险预警
      fourBall: [
        { img: require('./image/ball1.png') },
        { img: require('./image/ball2.png') },
        { img: require('./image/ball3.png') },
        { img: require('./image/ball4.png') }
      ]
    }
  },
  computed: {},
  mounted () {},
  methods: {},
  components: {}
}
</script>
<style>
.el-carousel__button {
  background-color: #00cccb !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 8px !important;
  opacity: 1 !important;
}
.el-carousel__indicator.is-active .el-carousel__button {
  width: 25px !important;
  height: 6px !important;
  border-radius: 8px !important;
}
.el-carousel__arrow {
  display: none;
}
.el-carousel__mask {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>
<style scoped lang="less">
.el-carousel {
  width: 475px;
  margin: 0 auto;
  padding-top: 10px;
}

.el-carousel__item h3 {
  font-size: 14px;
  opacity: 1;
  line-height: 200px;
  margin: 0;
}
.box-first {
  background-image: url("./image/youbj.png");
  height: 319px;
  background-repeat: no-repeat;
  padding-top: 10px !important;
  .xlgc {
    background-image: url("./image/6dbt.png");
    background-repeat: no-repeat;
    background-position: left center;
    width: 145px;
    margin: 10px auto;
    color: #fff;
    font-family: YouShe;
    padding-left: 25px;
    font-size: 28px;
  }
  .dianwei {
    background-image: url("./image/dianweibg.png");
    background-repeat: no-repeat;
    background-position: left center;
    width: 179px;
    margin: 10px auto;
    color: #02fffd;
    font-family: YouShe;
    padding-left: 25px;
    font-size: 20px;
    span {
      color: #fec200;
    }
  }
}
.box-second {
  background-image: url("./image/youbj.png");
  height: 319px;
  background-repeat: no-repeat;
  padding-top: 10px !important;
  margin: 10px 0;
  .xlgc {
    background-image: url("./image/6dbt.png");
    background-repeat: no-repeat;
    background-position: left center;
    width: 160px;
    margin: 10px auto;
    color: #fff;
    font-family: YouShe;
    padding-left: 25px;
    font-size: 28px;
  }
  .box1 {
    display: flex;
    width: 350px;
    height: 90px;
    margin: 26px auto 0 auto;
    .box1-1 {
      flex: 2.5;
      background-image: url("./image/wghficon.png");
      background-repeat: no-repeat;
      background-position: center;
    }
    .box1-2 {
      line-height: 90px;
      font-size: 24px;
      font-family: YouShe;
      padding-left: 10px;
      color: #fff;
      width: 126px;
    }
    .box1-3 {
      flex: 5.8;
      background-image: url("./image/83bjs.png");
      background-repeat: no-repeat;
      background-position: 0 60px;
      font-family: YouShe;
      font-size: 28px;
      color: #01fffd;
      line-height: 87px;
      text-align: center;
    }
  }
  .box2 {
    display: flex;
    width: 350px;
    height: 90px;
    margin: 0 auto;
    .box1-1 {
      flex: 2.5;
      background-image: url("./image/wgyicon.png");
      background-repeat: no-repeat;
      background-position: center;
    }
    .box1-2 {
      line-height: 90px;
      font-size: 24px;
      font-family: YouShe;
      padding-left: 10px;
      width: 126px;
      color: #fff;
    }
    .box1-3 {
      flex: 5.8;
      background-image: url("./image/83bjs.png");
      background-repeat: no-repeat;
      background-position: 0 60px;
      font-family: YouShe;
      font-size: 28px;
      color: #01fffd;
      line-height: 87px;
      text-align: center;
    }
  }
}
.box-three {
  background-image: url("./image/youbj.png");
  height: 319px;
  background-repeat: no-repeat;
  padding-top: 10px !important;
  .xlgc {
    background-image: url("./image/6dbt.png");
    background-repeat: no-repeat;
    background-position: left center;
    width: 180px;
    margin: 10px auto;
    color: #fff;
    font-family: YouShe;
    padding-left: 25px;
    font-size: 28px;
  }
  .fourbox {
    background-image: url("./image/4536tgh.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 86%;
    display: flex;
    width: 90%;
    margin: 0 auto;
    .fourbox-box {
      flex: 1;
      padding-top: 20px;
      .imgBox {
        height: 99px;
        background-repeat: no-repeat !important;
        background-position: center !important;
        display: block;
        margin: 0 auto;
        animation: jump 3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
      }
    }
    .fourbox-box:nth-child(1) .imgBox {
      margin-top: 60px;
    }
    .fourbox-box:nth-child(4) .imgBox {
      margin-top: 60px;
    }
  }
}
@keyframes jump {
  0% {
    transform: translateY(0) scale(1);
  }
  /* 中间状态图片位移并且拉伸 */
  50% {
    transform: translateY(-10px) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
</style>
